<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui">
    <h:head>
        <title>
	        <ui:insert name="title">ACUMAAF - SIAF 2.0</ui:insert>
        </title>
    </h:head>
	<h:body>
    	<p:layout fullPage="true" onResizeComplete="true">
		    <!-- LAYOUT DO TOPO DA PÁGINA -->
			<p:layoutUnit position="top" resizable="false" height="150" style=" background-image: url('../images/bg.png')">
				<ui:include src="/componentes/layout_menu_doc_top.xhtml"/>
				<p:graphicImage url="/images/layout-top-atividade-fisica2.png" style="height:90px;"/>
			</p:layoutUnit>
       		<!-- LAYOUT DO LADO ESQUERDO DA PÁGINA -->
       		<p:layoutUnit position="left" header="Calendário" resizable="false" width="250">
        		<ui:include src="/componentes/layout_esquerdo.xhtml" />
       		</p:layoutUnit>
       		<!-- LAYOUT DO LADO ESQUERDO DA PÁGINA -->
       		<p:layoutUnit position="right" header="Imagem" resizable="false" width="250">
       			<ui:include src="/componentes/layout_direito.xhtml" />
        	</p:layoutUnit>
        	<!-- LAYOUT DO CENTRO DA PÁGINA -->
       		<p:layoutUnit position="center" id="centro" resizable="true"  scrollable="true" width="250">
       			<!-- FORMULÁRIO PARA CADASTRAR ATIVIDADE FISICA -->
				<h:form>
					<p:growl autoUpdate="true" id="growl" sticky="true"/>
 					<p:messages autoUpdate="true"/>
						<p:panel header="Dados para o cadastro de Atividade Física">
							<h:panelGrid columns="2" columnClasses="label, value" styleClass="grid">
								<h:outputText value="Nome........: *" />
									<p:inputText maxlength="50" value="#{atividadefisicaMB.atividadeFisica.nome}" required="true" requiredMessage="[Nome] O campo NOME deverá ser preenchido" style="width:200px"/>
							</h:panelGrid>
						</p:panel>
						<p:panel header="Observações">
							<h:panelGrid columns="2" columnClasses="label, value">
								<h:outputText value="Observação: " />
									<p:inputTextarea maxlength="300" value="#{atividadefisicaMB.atividadeFisica.descricao}" style="width:300px; height: 60px;" effectDuration="400"/>	
							</h:panelGrid>
						</p:panel>
				 		<h:panelGrid columns="2" columnClasses="label, value" styleClass="grid">
							<h:outputText value="* Campos Obrigatórios!"/> <br/><br/>
							<p:commandButton value="Cadastrar" action="#{atividadefisicaMB.cadastrarAtividadeFisica}" update="growl" ajax="false" image="ui-icon ui-icon-pencil"/>			
						</h:panelGrid>
				</h:form>
 		   	</p:layoutUnit>
 		   	<!-- LAYOUT DO RODAPÉ DA PÁGINA -->
       		<p:layoutUnit position="bottom" resizable="false" height="60" style="background-image: url('../images/bg.png')">
        		<ui:include src="/componentes/layout_rodape.xhtml" />
       		</p:layoutUnit>
    	</p:layout>
 	</h:body>
</html>